<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="author-name" content="Mironcoder | Miron Mahmud" />
  <meta name="author-email" content="mironcoder@gmail.com" />
  <meta name="author-profile" content="https://themeforest.net/user/mironcoder" />
  <meta name="template-name" content="Vegana" />
  <meta name="template-created" content="09-November-2020" />
  <meta name="template-title" content="Vegana - vegan food eCommerce store html template" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta name="keywords" content="vegana, vegan, food, eCommerce, store, html, template, bootstrap, vegetarian, organic, vegetables, greengrocery, fruit, healthy, shop" />
  <title>博客列表</title>
  <link rel="icon" href="../assets/images/logo/favicon.png" />
  <link rel="stylesheet" href="../assets/source/css/vendor/flaticon.css" />
  <link rel="stylesheet" href="../assets/source/css/vendor/fontawesome.css" />
  <link rel="stylesheet" href="../assets/source/css/vendor/bootstrap.min.css" />
  <link rel="stylesheet" href="../assets/source/css/custom/main.css" />
  <link rel="stylesheet" href="../assets/source/css/custom/blog-list.css" />
  <link rel="stylesheet" href="../back/css/index.css" />
 </head>
 <body>
<div id="app">
  <header class="header-part">
   <div class="container">
    <div class="row">
     <div class="col-sm-12 col-md-6 col-lg-6">
      <ul class="header-info">
        <li> <i class="fas fa-envelope"></i><p>{{adminEmail}}</p></li>
        <li> <i class="fas fa-phone-alt"></i><p>+{{adminTel}}</p></li>
      </ul>
     </div>
     <div class="col-sm-12 col-md-6 col-lg-6">
        <div class="login_info" v-if="userInfo == ''">
            <a href="login.html" target="_blank" title="点击登录">您好，请先登录</a>
            <a href="reg.html" target="_blank" title="点击注册">免费注册</a>
        </div>
        <div class="login_info" v-else>
            <span>尊敬的用户{{userInfo.uname}},您好</span>
            <a href="login.html" title="点击退出">退出登录</a>
        </div>
     </div>
    </div>
   </div> 
  </header> 
  <nav class="navbar-part">
   <div class="container">
    <div class="row">
     <div class="col-lg-12">
      <div class="navbar-element">
       <ul class="left-widget">
        <li><a class="icon icon-inline menu-bar" href="#"><i class="fas fa-align-left"></i></a></li>
       </ul> 
       <a class="navbar-logo" href="#"> <img src="../assets/images/logo/01.png" alt="logo" /> </a>
       <ul class="right-widget">
        <li><a class="icon icon-inline" href="login.html"><i class="fas fa-user"></i></a></li>
          <li><a class="icon icon-inline" href="wishlist.html"><i class="fas fa-heart"></i><sup>{{wishCount}}</sup></a></li>
          <li><a class="icon icon-inline" href="cartlist.html"><i class="fas fa-shopping-cart"></i><sup>{{cartCount}}</sup></a></li>
         </ul>
      </div>
     </div>
    </div>
    <div class="row">
     <div class="col-lg-12">
      <div class="navbar-slide">
       <div class="navbar-content">
        <div class="navbar-slide-cross"> 
         <a class="icon icon-inline cross-btn" href="javascript:void(0);"><i class="fas fa-times"></i></a>
        </div>
        <div class="navbar-slide-logo"> 
         <a href="#"><img src="../assets/images/logo/01.png" alt="logo" /></a>
        </div>
        <form class="search-form mb-4 navbar-slide-src"> 
         <input type="text" placeholder="Search anything..." /> 
         <button class="btn btn-inline"> <i class="fas fa-search"></i> <span>search</span> </button>
        </form>
        <ul class="navbar-list">
            <li class="navbar-item active"><a class="navbar-link" href="../index.html">家</a></li>
         
            <li class="navbar-item navbar-dropdown"> <a class="navbar-link dropdown-indicator" href="#"> <span>店</span> <i class="fas fa-chevron-down"></i> </a>
                <ul class="dropdown-list">
           
                    <li><a class="dropdown-link" href="shop-rightbar.html">使用右栏购物</a></li>
           
          </ul></li>
          <li class="navbar-item navbar-dropdown"> <a class="navbar-link dropdown-indicator" href="#"> <span>页面</span> <i class="fas fa-chevron-down"></i> </a>
            <ul class="dropdown-list">
           <li><a class="dropdown-link" href="cartlist.html">购物清单</a></li>
           <li><a class="dropdown-link" href="wishlist.html">心愿单</a></li>
           
           <li><a class="dropdown-link" href="login.html">注销</a></li>
          </ul></li>
          <li class="navbar-item navbar-dropdown"> <a class="navbar-link dropdown-indicator" href="#"> <span>博客</span> <i class="fas fa-chevron-down"></i> </a>
            <ul class="dropdown-list">
                <li><a class="dropdown-link" href="blog-list.html">博客列表</a></li>
                <li><a class="dropdown-link" href="blog-details.html">博客详细信息</a></li>
          </ul></li>
          <li class="navbar-item"><a class="navbar-link" href="account.html">账户</a></li>
          <li class="navbar-item"><a class="navbar-link" href="contact.html">联系我们</a></li>
        </ul>
       </div>
      </div>
     </div>
    </div>
   </div> 
  </nav>
  <div class="btmbar-part">
   <ul class="btmbar-widget">
    <li> <a href="../home-1.html"> <i class="fas fa-home"></i> <span>Home</span> </a></li>
    <li> <a href="wishlist.html" class="wish-icon"> <i class="fas fa-heart"></i> <span>Wishlist</span> <sup>0</sup> </a></li>
    <li> <a href="cartlist.html" class="cart-icon"> <i class="fas fa-shopping-basket"></i> <span>Cart</span> <sup>0</sup> </a></li>
    <li> <a href="account.html"> <i class="fas fa-cog"></i> <span>Settings</span> </a></li>
   </ul>
  </div> 
  <section class="single-banner">
   <div class="container">
    <div class="row">
     <div class="col-lg-12">
      <div class="single-content">
       <h2>博客列表</h2>
       <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="../index.html">家</a></li>
        <li class="breadcrumb-item active" aria-current="page">博客列表</li>
       </ol>
      </div>
     </div>
    </div>
   </div> 
  </section> 
  <section class="bloglist-part">
   <div class="container">
    <div class="row cont-rev">
     <div class="col-lg-4">
      <div class="row">
       <div class="col-lg-12">
        <div class="sidebar-content">
         <h3 class="title">查找博客</h3>
         <div class="sidebar-form"> 
          <input type="text" placeholder="Search..." v-on:input="handleEnter"  v-model="blogName" /> 
          <!--@keyup.enter="handleEnter"-->
          <i class="fas fa-search"></i>
         </div>
        </div>
       </div>
       <div class="col-md-6 col-lg-12">
        <div class="sidebar-content">
         <h3 class="title">热门帖子</h3>

         <div class="sidebar-blog" v-if="hotBlog === ''">
          <div class="blog-list">
           <div class="blog-list-img"> 
            <img src="" alt="blog-list-3" />
           </div>
           <div class="blog-list-content">
            <ul class="blog-meta">
             <li> <i class="far fa-calendar-alt"></i> <span></span></li>
             <li> <i class="far fa-comments"></i> <span></span></li>
            </ul>
            <div class="blog-text">
             <h3><a href="javascript:void(0);">暂无热门帖子</a></h3>
            </div>
           </div>
          </div>
         </div>


         <div class="sidebar-blog" v-else>
          <div class="blog-list" v-for="item in hotBlog">
            <div class="blog-list-img"> 
             <img :src=`../../../upload/${item.pic}` alt="blog-list-3" />
            </div>
            <div class="blog-list-content">
             <ul class="blog-meta">
              <li> <i class="far fa-calendar-alt"></i> <span>{{item.time}}</span></li>
              <li> <i class="far fa-comments"></i> <span>{{item.count}}条评论数</span></li>
             </ul>
             <div class="blog-text">
              <h3><a :href=`./blog-details.html?${item.bid}`>{{item.title}}</a></h3>
             </div>
            </div>
           </div>
         </div>


        </div>
       </div>
       <div class="col-md-6 col-lg-12">
        <div class="sidebar-content">
         <h3 class="title">热门品类</h3>
         <ul class="sidebar-cate">
          <li v-for="item in blogTypes"><h6><a href="javascript:void(0);" @click="getbtid(item)">{{item.btname}}</a></h6><p>{{item.count}}</p></li>
         </ul>
        </div>
       </div>
       <div class="col-md-6 col-lg-12">
        <div class="sidebar-content">
         <h3 class="title">关注我们</h3>
         <ul class="sidebar-icon">
          <li><a class="icon icon-inline" href="#"><i class="fab fa-facebook-f"></i></a></li>
          <li><a class="icon icon-inline" href="#"><i class="fab fa-twitter"></i></a></li>
          <li><a class="icon icon-inline" href="#"><i class="fab fa-linkedin-in"></i></a></li>
          <li><a class="icon icon-inline" href="#"><i class="fab fa-behance"></i></a></li>
          <li><a class="icon icon-inline" href="#"><i class="fab fa-pinterest-p"></i></a></li>
         </ul>
        </div>
       </div>
       <div class="col-lg-12">
        <div class="sidebar-ad"> 
         <a href="javascript:void(0);"><img src="../assets/images/ad-banner/04.jpg" alt="ad" /></a>
        </div>
       </div>
      </div>
     </div>
     <div class="col-lg-8">
      <div class="row">
       <div class="col-md-6 col-lg-6" v-for="item in Blogs">
        <div class="blog-card">
         <div class="blog-img"> 
          <img :src=`../../../upload/${item.pic}` alt="blog-8" />
         </div>
         <div class="blog-content">
          <ul class="blog-meta">
           <li> <i class="far fa-calendar-alt"></i> <span>{{item.time}}</span></li>
           <li> <i class="far fa-comments"></i> <span>{{item.count}} 条评论数</span></li>
          </ul>
          <div class="blog-text">
           <h3><a :href=`./blog-details.html?${item.bid}`>{{item.title}}</a></h3>
          </div>
          <div class="read-btn"> 
           <a :href=`./blog-details.html?${item.bid}`>读取更多 <i class="fas fa-arrow-right"></i></a>
          </div>
         </div>
        </div>
       </div>
      </div>
      <div class="row">
       <div class="col-lg-12">
        <ul class="pagination">
            <el-pagination
        layout="prev, pager, next"
        :total="blogNum"
        :page-size="pageSize"
        :current-page="page"
        @current-change="changPage">
  		  </el-pagination>
         </ul>
       </div>
      </div>
     </div>
    </div>
   </div> 
  </section> 
  <section class="news-part">
   <div class="container">
    <div class="row">
     <div class="col-md-5 col-lg-6">
      <div class="news-content">
       <h2>Subscribe for Latest Offers</h2>
      </div>
     </div>
     <div class="col-md-7 col-lg-6">
      <form class="search-form news-form"> 
       <input type="text" placeholder="Enter Email Address" /> 
       <button class="btn btn-inline"> <i class="fas fa-envelope"></i> <span>Subscribe</span> </button>
      </form>
     </div>
    </div>
   </div> 
  </section> 
  <footer class="footer-part">
   <div class="container">
    <div class="row">
     <div class="col-md-6 col-lg-4">
      <div class="footer-content"> 
       <a href="#"><img src="../assets/images/logo/01.png" alt="logo" /></a>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur repudiandae quisquam adipisci asperiores, ipsum ipsa repellat assumenda dolor perspiciatis.</p>
       <ul class="footer-icon">
        <li><a class="icon icon-inline" href="#"><i class="fab fa-facebook-f"></i></a></li>
        <li><a class="icon icon-inline" href="#"><i class="fab fa-twitter"></i></a></li>
        <li><a class="icon icon-inline" href="#"><i class="fab fa-linkedin-in"></i></a></li>
        <li><a class="icon icon-inline" href="#"><i class="fab fa-instagram"></i></a></li>
        <li><a class="icon icon-inline" href="#"><i class="fab fa-pinterest-p"></i></a></li>
       </ul>
      </div>
     </div>
     <div class="col-md-6 col-lg-4">
      <div class="footer-content">
       <h3 class="title">Useful Links</h3>
       <div class="footer-widget">
        <ul>
         <li><a href="#">My Account</a></li>
         <li><a href="#">Order History</a></li>
         <li><a href="#">Order Tracking</a></li>
         <li><a href="#">Best Seller</a></li>
         <li><a href="#">New Arrivals</a></li>
        </ul>
        <ul>
         <li><a href="#">Location</a></li>
         <li><a href="#">Affiliates</a></li>
         <li><a href="#">Contact</a></li>
         <li><a href="#">Carrer</a></li>
         <li><a href="#">Faq</a></li>
        </ul>
       </div>
      </div>
     </div>
     <div class="col-md-12 col-lg-4">
      <div class="footer-content">
       <h3 class="title">Download the App</h3>
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit dicta amet tenetur soluta blanditiis at optio molestias facilis praesentium eos! Sed placeat a labore corporis aliquam reiciendis eaque quisquam corrupti.</p>
      </div>
      <ul class="download-app">
       <li><a href="#"><img src="../assets/images/logo/google.png" alt="google" /></a></li>
       <li><a href="#"><img src="../assets/images/logo/app.png" alt="app" /></a></li>
      </ul>
     </div>
    </div>
   </div> 
  </footer>
  <div class="footer-bottom">
   <div class="container">
    <p>Copyright &copy; 2020 | All rights reserved by <a target="_blank" href="https://themeforest.net/user/mironcoder">Mironcoder</a></p>
    <ul class="pay-card">
     <li><a href="#"><img src="../assets/images/pay-card/01.jpg" alt="payment-1" /></a></li>
     <li><a href="#"><img src="../assets/images/pay-card/02.jpg" alt="payment-2" /></a></li>
     <li><a href="#"><img src="../assets/images/pay-card/03.jpg" alt="payment-3" /></a></li>
     <li><a href="#"><img src="../assets/images/pay-card/04.jpg" alt="payment-4" /></a></li>
    </ul>
   </div>
  </div>
</div>
<script src="../js/vue.js"></script>
<script src="../js/axios.js"></script>
<script src="../js/qs.js"></script>  
<script src="../assets/source/js/vendor/jquery-1.12.4.min.js"></script> 
<script src="../assets/source/js/vendor/popper.min.js"></script> 
<script src="../assets/source/js/vendor/bootstrap.min.js"></script> 
<script src="../assets/source/js/custom/main.js"></script>
<script src="../back/js/index.js"></script>
<script>
    let app = new Vue({
        el : '#app',
        data:{
            adminEmail:'',
            adminTel:'',
            uid:'',
            userInfo:{},//用户信息
            cartCount:0,//购物车数量
            wishCount:0,//心愿单数量///
            types:[],//类别信息
            blogTypes:[],//博客类别信息
            Blogs:[],//博客数组
            blogName:'',//博客名
            pageSize:2,//一页8篇
            page:1,//当前页码
            pages:0,//总页码数
            blogNum:0,//博客数量
            btid:0,//存博客类别id
            hotBlog:[]//热门博客
        },
        methods:{
            findAdminInfo(){//查询管理员信息
            axios.get("../userController/findAdminInfo").then(resp=>{
              localStorage.setItem("adminEmail",resp.data.email);
              localStorage.setItem("adminTel",resp.data.tel);
              this.adminEmail = resp.data.email;
              this.adminTel = resp.data.tel;
              
            });
          },
          findUserInfo(){//查询用户信息
            let uid = localStorage.getItem("uid");
              if(uid == null || uid == ""){
                alert("请先登录");
                  location.href="login.html";
					        return;
                
				    }else{
              this.uid = localStorage.getItem("uid");
            }
            axios.get("../userController/findUserInfo").then(resp=>{
                if(resp.data == -1){
                  alert("请先登录");
                  location.href = "login.html";
                  return;
                }else{
                  this.userInfo = resp.data;
                  console.log(resp.data);
                }
              });  
          },
          findTypes(){
            axios.get("../typeController/findTypes").then(resp=>{
              this.types = resp.data;
            });
          },
          getCartCount(){//得到购物车数量
            if(this.userInfo == null){
              return;
            }
            let count = localStorage.getItem("cartCount");
            if(count == null || count == ""){
              axios.get("../carInfoController/getCartCount",{
                params:{
                  uid:this.uid
                }
                }).then(resp=>{
                this.cartCount = resp.data;
                console.log(this.cartCount);
                //存值
                localStorage.setItem("cartCount",this.cartCount);
              });
            }else{
              this.cartCount = count;
            }		
			    },
          getWishCount(){//得到心愿单数量
            if(this.userInfo == null){
              return;
            }
            let count = localStorage.getItem("wishCount");
            if(count == null || count == ""){
              axios.get("../wishController/getWishCount",{
                params:{
                  uid:this.uid
                }
                }).then(resp=>{
                this.wishCount = resp.data;
                //存值
                localStorage.setItem("wishCount",this.wishCount);
              });
            }else{
              this.wishCount = count;
            }		
			    },
            getBlogTypes(){
                axios.get("../blogtypeController/getBlogTypes").then(resp=>{
                    this.blogTypes = resp.data;
                    console.log(this.blogTypes);
                });
            },
            getAllBlog(){
                axios.post("../blogController/getAllBlog",qs.stringify({
                    btid:this.btid,
                    blogName:this.blogName,
                    page:this.page,
                    pageSize:this.pageSize
                })).then(resp=>{
                  if (Array.isArray(resp.data) && resp.data.length > 0) {  
                    this.Blogs = resp.data;  
                    console.log("Blogs:", this.Blogs);  
                    console.log("First Blog Num:", resp.data[0].blogNum);  
                    this.blogNum = Number(resp.data[0].blogNum);  
                  } else {  
                      this.Blogs = [];  
                      this.blogNum = 0;  
                  }  
                });
            },
            handleEnter(){
              this.page = 1;
              this.btid = 0;
              this.getAllBlog();
              
            },
            changPage(val){
                this.page = val;
                this.getAllBlog();
                console.log("val"+val);
            },
            getbtid(obj){
              this.page = 1;
              this.btid = obj.btid;
              console.log("btid" + this.btid);
              this.blogName = '';
              this.getAllBlog();
            },
            getHotBlog(){
              axios.get("../blogController/getHotBlog").then(resp=>{
                if (Array.isArray(resp.data) && resp.data.length > 0) {
                  this.hotBlog = resp.data;
                }else{
                  return;
                }  
              });
            }
            
        },
        created(){
            this.findAdminInfo();
            this.findUserInfo();
            this.findTypes();
            this.getCartCount();
            this.getWishCount();
            this.getBlogTypes();
            this.getAllBlog();
            this.getHotBlog();
        }
    });
</script> 
</body>
</html>